<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 模拟耗时操作
const ready = ref(false)
onMounted(async () => {
  await new Promise(resolve => setTimeout(resolve, 1000))
  ready.value = true
})
</script>

<template>
  <div class="heavy-component">
    <h4>这是一个重型组件</h4>
    <p>{{ ready ? '加载完成' : '正在加载...' }}</p>
  </div>
</template>

<style scoped>
.heavy-component {
  padding: 20px;
  background: #f5f5f5;
  border-radius: 4px;
}
</style> 